<template>
    <div>

<!--       卡片视图 /-->
        <el-card>
            <el-row class="addClass">
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <el-row>
                <tree-table
                :data="cateList"
                :columns="columns"
                :selection-type="false"
                :expand-type="false"
                show-index
                index-text="#"
                border
                :show-row-hover="false"
                >
<!--                    是否有效-->
                    <template slot="idOk" slot-scope="scope">
                        <i  class="el-icon-success" style="color: lightblue" v-if="scope.row.cat_deleted === false"></i>
                        <i class="el-icon-error"  style="color: red" v-else></i>
                    </template>
<!--                    排序-->
                    <template slot="order" slot-scope="scope">
                        <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
                        <el-tag v-if="scope.row.cat_level===1" size="mini" type="success">二级</el-tag>
                        <el-tag v-if="scope.row.cat_level===2"  size="mini" type="warning">三级</el-tag>
                    </template>
<!--                    操作-->
                    <template slot="opt" slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editCate(scope.row)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCate(scope.row)">删除</el-button>
                    </template>

                </tree-table>
<!--                分页分区-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="querInfo.pagenum"
                        :page-sizes="[1,5, 10, 50]"
                        :page-size="querInfo.pagesize"
                        layout="total, sizes, prev, pager, next,jumper"
                        :total="total">
                </el-pagination>


            </el-row>

        </el-card>

<!--        添加分类-->
        <el-dialog
                title="添加分类"
                :visible.sync="addCatedialogVisible"
                width="40%"
        >
            <el-form ref="addCateForm" v-model="addCateForm" label-width="150px">
                <el-form-item label="类型名称:" > <el-input v-model="addCateForm.cat_name"></el-input></el-form-item>
                <el-form-item label="父级分类:">
                    <el-cascader
                            v-model="selectKeys"
                            expand-trigger="hover"
                            :options="parentCatelist"
                            :props="cascaderProps"
                            @change="selectChange"
                            multiple
                            change-on-select
                            clearable
                    >
                    </el-cascader>

               </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addCatedialogClosed">取 消</el-button>
                <el-button type="primary" @click="addCate">立即添加</el-button>
            </span>
        </el-dialog>
<!--        编辑分类-->
        <el-dialog
                title="编辑"
                :visible.sync="editCatedialogVisible"
                width="40%"
        >
            <el-form ref="addCateForm" v-model="addCateForm" label-width="150px">
                <el-form-item label="原名称:" > <el-input v-model="cat_old_name"></el-input></el-form-item>
                <el-form-item label="新名称:" > <el-input v-model="cat_new_name"></el-input></el-form-item>



            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addCatedialogClosed">取 消</el-button>

                <el-button type="primary" @click="modification">立即修改</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Cate",
        data(){
            return{
                querInfo:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                cateList:[],
                total:0,

                columns: [
                    {
                        label: '分类名称',
                        prop: 'cat_name',
                        width: '400px',
                    },
                    {
                        label: '是否有效',
                        type:'template',
                        template:'idOk',
                    },
                    {
                        label: '排序',
                        type:'template',
                        template:'order',

                    },
                    {
                        label: '操作',
                        type:'template',
                        template:'opt',
                        width: '300px',

                    }
                ],
                addCatedialogVisible:false,
                addCateForm:{
                    //添加的名称
                    cat_name:'',
                    //父级名称
                    cat_pid:0,
                    cat_level:0
                }
                ,
                parentCatelist:[],
                cascaderProps:
                    {
                        expandTrigger: 'hover',
                        value:'cat_id',
                        label:'cat_name',
                        children:"children"
                    },
                //选中的
                selectKeys:[],
                //编辑对话框
                editCatedialogVisible:false,
                cat_old_name:'',
                cat_new_name:'',
                cate_id:0

            }
        },
        created(){
            this.getCateList()
        },
        methods:{
            //获取列表
            async getCateList(){
             let {data:res}=await   this.$http.get('categories',{params:this.querInfo})
                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.cateList=res.data.result
                //为总数据条数赋值
                this.total=res.data.total
            },
            handleSizeChange(newsize){
                this.querInfo.pagesize=newsize
                this.getCateList()
            }
            ,handleCurrentChange(newpage){
                this.querInfo.pagenum=newpage
                this.getCateList()
            },
            //获取父级列表
            async  getParentCateList(){
                let {data:res}=await   this.$http.get('categories',{params:{type:2}})

                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.parentCatelist=res.data
            },
            //打开添加对话框
            showAddCateDialog(){
               this. addCatedialogVisible=true
                this.getParentCateList()
            },
            //选择改变事件
            selectChange(){
                console.log(this.selectKeys)
                if (this.selectKeys.length>0){
                    this.addCateForm.cat_pid=this.selectKeys[this.selectKeys.length-1]
                    //为当前分类等级赋值
                    this.addCateForm.cat_level=this.selectKeys.length
                    return
                }
                else{
                    this.addCateForm.cat_pid=0
                    //为当前分类等级赋值
                    this.addCateForm.cat_level=0

                }


            },
            //确认添加
            async  addCate(){
                    if ( this.addCateForm.cat_name){
                        let {data:res}=await   this.$http.post('categories', this.addCateForm)
                        if (res.meta.status != 201) return Message.error(res.meta.msg)
                        this.getCateList()
                        this.addCatedialogClosed()
                    }
            },
            //取消添加事件
            addCatedialogClosed(){
                this.$refs.addCateForm.resetFields()
                this.addCatedialogVisible = false
                this.addCateForm.cat_pid=0
                //为当前分类等级赋值
                this.addCateForm.cat_level=0
                this.selectKeys=[]
            },
            //编辑分类
            editCate(cate){

                this.editCatedialogVisible=true
                this.cat_old_name=cate.cat_name
                this.cate_id=cate.cat_id
                console.log(cate)
                this.cat_new_name=''

            },
            //修改
            async modification(){
                console.log(this.cate_id)
                if ( this.cat_new_name==='') {alert('新名称不能为空') ;return }
                let {data:res}=await   this.$http.put(`categories/${ this.cate_id}`, {cat_name:this.cat_new_name})
                console.log(res)
                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.getCateList()
                this.editCatedialogVisible=false
            }
            ,
            //删除
            async deleteCate(cate){
                console.log(this.cate_id)

                let vm =this
                let relust =await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>{
                    return err
                })

                if (relust==='confirm'){
                let {data:res}=await   this.$http.delete(`categories/${ cate.cat_id}`)
                console.log(res)
                if (res.meta.status != 200) return Message.error(res.meta.msg)

                this.getCateList()

            }}
        }

    }
</script>

<style scoped>
.el-cascader{
    width: 100%;
}
    .addClass{
        margin-bottom: 10px;
    }
</style>
